<template>
    <li>

      <router-link to="/gonglue/1"  tag="div" class="gonglue-sightimg">
        <img :src ="gonglueItem.thumbnail"/>
        <div class="banner-number">
          <span class="iconfont arrow-icon">&#xe650;</span>{{gonglueItem.gonglueImgs.length}}
        </div>
      </router-link>

      <div class="gonglue-info">
        <div class="gonglue-commentuser">
          <span class="gonglue-username">{{gonglueItem.userName}}</span>
          <span class="gonglue-start">
            <i class="startlevel-gain iconfont" >{{ _.join(new Array(gonglueItem.start+1), '&#xe6b0;') }}</i>
            <i class="startlevel-total iconfont">&#xeeff;&#xeeff;&#xeeff;&#xeeff;&#xeeff;</i>
          </span>
          <span class="gonglue-time">{{gonglueItem.gonglueTime}}</span>
        </div>

        <div class="gonglue-comment">
          <div class="comment-content content-reduce" :class="{'content-reduce':!isExpendContent,'content-expend':isExpendContent}">
            {{gonglueItem.gonglueContent}}
          </div>
          <div class="comment-descmore" @click="expendContent">
            <span class="iconfont" v-html="changeArrow">&#xe62e;</span>
          </div>
        </div>
      </div>

    </li>
</template>

<script>
export default {
  props: {
    gonglueItem: Object
  },
  data () {
    return {
      isExpendContent: false,
      contentArrow: ''
    }
  },
  methods: {
    expendContent: function () {
      this.isExpendContent = !this.isExpendContent
    }
  },
  components: {},
  computed: {
    changeArrow: function () {
      //  监听器改变上下箭头 是否展开内容？向上箭头： 向下箭头
      return this.isExpendContent ? '&#xe62c;' : '&#xe62e;'
    }
  }
}
</script>

<style lang="stylus" scoped>
.gonglue-sightimg
  height :0
  width :100%
  padding-bottom :48%
  position :relative
  img
    width :100%
  .banner-number
      background :rgba(0,0,0,.5)
      border-radius :0.4rem
      margin-right :0.2rem
      padding :0 0.2rem
      bottom :0.2rem
      right: 0.2rem
      color :#ffffff
      position: absolute
.gonglue-info
  padding :0.2rem 0.3rem 0 0.3rem
  .gonglue-commentuser
    padding-right :0.1rem
    padding-left :0.1rem
    .gonglue-username
      font-size :0.24rem
      color :#616161
      margin-right :0.1rem
    .gonglue-start
      position :relative
      width :1.66rem
      .startlevel-gain
        color :#ffb436
        z-index :2
      .startlevel-total
        color :#e0e0e0
      .startlevel-gain,.startlevel-total
        position: absolute
        top: 0
        left :0
    .gonglue-time
      position: absolute
      right: .4rem
      color: #9e9e9e
  .gonglue-comment
    margin-top: .2rem
    line-height: .4rem
    .comment-content
      margin-bottom :0.3rem
      &.content-reduce
        overflow: hidden
        height: 100px
      &.content-expend
        overflow: auto
        height: auto
    .comment-descmore
      height: .2rem
      color: #9e9e9e
      line-height: .2rem
      margin-bottom :0.3rem
      text-align: center
</style>
